<template>
  <div class="body">
    <item-toplogo :title="items.name"></item-toplogo>
    <div @click="sendid(items.filmId)" class="movie-detail">
        <div class="movie-filter"></div>
        <div class="poster-bg" :style="{
          'background-image': 'url('+this.items.poster+')'
          }"></div>
        <div class="detail box-flex">
      <div class="poster">
        <img :src="this.items.poster" alt="">
      </div>
     <div class="content flex">
			<div class="title middle line-ellipsis">{{items.name}}</div>
            <div class="title-en-name line-ellipsis">{{items.director |directorfilter}}</div>
			<div class="score line-ellipsis">   
               <span class="snum">总评分：{{items.grade | gradefilter}}</span>
            </div>
            <div class="type line-ellipsis">
                <span>{{items.category}}</span>
                
                    <div class="type-group">
                        
                        <img style="width: 42px;" class="sd-imax" src="//p0.meituan.net/scarlett/19644c8f1608b95ba52918d0cd9f4b521076.png">
                        
                    </div>
                
            </div>
            <div class="src line-ellipsis">{{items.nation+'/'+items.runtime}}</div>
            <div class="pubDesc line-ellipsis">{{items.premiereAt | premiereAtfilter}}{{items.nation}}上映</div>
        </div>
        </div>
        <div class="arrow-g">
      <img src="//p0.meituan.net/scarlett/c3645757d488524c4af43f8278ceb929372.png" alt="">
        </div>
    </div>
    <div id="showDays">
      <ul id="timeline" class="mb-line-b">
        <li @click="ishowclick1" :class="ishow1==1?'chosen':''"  class="showDay" >
            今天{{Today}}
        </li>
        <li  @click="ishowclick2" :class="ishow2==1?'chosen':''" class="showDay" >
            明天{{Tomorrow}}
        </li>
        <li  @click="ishowclick3" :class="ishow3==1?'chosen':''" class="showDay" >
            后天{{Aftertomorrow}}
        </li>
        <!-- <li @click="ishowclick4" :class="ishow4==1?'chosen':''" class="showDay" >
            {{specialdaya}}{{specialdayc}}
        </li> -->
      </ul>
    </div>
   <div class="nav-wrap filter-nav-wrap">
            <div class="tab mb-line-b">
                <div @click="changecolor" :class="ishow?'chosenTitle':''" class="item">
                    全城
                    <span class="drop"></span>
                </div>
                <div class="item">
                    APP订票
                    <span class="drop"></span>
                </div>
                <div class="item">
                    最近去过
                    <span class="drop"></span>
                </div>
            </div>
            <div class="close-tab">
                <div class="tab-content">
                    <div class="page special">
                        <div id="special-content" style="height: 373.4px;">
                            <div class="item-title">特色功能</div>
                            <div class="item-list">
                                <div class="item chosen">全部</div>
                                <div class="item">可改签</div>
                                <div class="item">可退票</div>
                            </div>
                            <div class="item-title">特殊厅</div>
                            <div class="item-list">
                                <div class="item chosen"> 全部</div>
                                <div class="item chosen"> IMAX厅</div>
                                <div class="item chosen"> CGS中国巨幕厅</div>
                                <div class="item chosen"> 杜比全景声厅</div>
                            </div>
                        </div>
                        <div id="special-btn">
                            <div class="btn" id="cancel-btn">重置</div>
                            <div class="btn" id="confirm-btn">确定</div>
                        </div>
                    </div>
                    <div class="page brand">
                        <div id="brand-content" style="height: 373.4px;">
                            <div class="item brand-list chosen">
                                <div class="brand-name">全部</div>
                                <div class="brand-count">22</div>
                            </div>
                            <div class="item brand-list">
                                <div class="brand-name">111</div>
                                <div class="brand-count">22</div>
                            </div>
                            <div class="item brand-list">
                                <div class="brand-name">111</div>
                                <div class="brand-count">22</div>
                            </div>
                        </div>
                    </div>
                    <div class="page region">
                        <div id="regin-tab">
                            <ul class="tab">
                                <li class="item chosen">
                                    商区
                                </li>
                                <li class="item">地铁站</li>
                            </ul>
                        </div>
                        <div id="regin-list" style="height: 435.633px;">
                            <div id="region-sidenav">
                                <div id="district">
                                    <div class="district-li item chosen">全部(22)</div>
                                    <div class="district-li item">临川区(6)</div>
                                </div>
                                <div id="subway"></div>
                            </div>
                            <div id="region-list-item"></div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
             <div v-show="ishow" class="mint-popup area-box filter-box mint-popup-top">
      <div class="filter-wrap">
        <ul class="district-list">
          <li @click="changeindex(index)" v-for="(data,index) in allcity" :key="index">
            <div :class="current===index?'selected':''">{{data}}</div>
          </li>
        </ul>
      </div>
    </div>
    </div>
    <!-- <div v-show="ishow" class="mint-popup area-box filter-box mint-popup-top">
      <div class="filter-wrap">
        <ul class="district-list">
          <li @click="changeindex(index)" v-for="(data,index) in allcity" :key="index">
            <div :class="current===index?'selected':''">{{data}}</div>
          </li>
        </ul>
      </div>
    </div> -->
    <div class="cinema-list">
        <div v-for="(cities,index) in this.cinemalist" :key="index" class="cinema-item clearfix" >
          <div class="cinema-detail">
             <div class="left">
                  <span class="cinema-name">{{cities.name}}</span>
                  <span class="address">{{cities.address}}</span>
              </div>
              <div class="right">
                  <div class="">
                    <span class="cinema-lowPrice price-fmt">
                      <i>￥</i>
                      <span class="interge" style="font-size: 15px;">{{(cities.lowPrice/100)}}</span>
                      <span class="" style='display: none;'></span>
                      <span class="decimal" style="font-size: 15px;"></span>
                      <span class="" style='display: none;'></span>
                      <span class="decimal" style="font-size: 15px; display: none;">00</span>
                    </span>
                    <span class="qi">起</span>
                  </div>
                  <div class="distance">
                    <strong>{{cities.Distance | Distancefilter}}km</strong>
                  </div>
              </div>
          </div>
        </div>
    </div>
  </div>
</template>
<style scoped>
.body .movie-detail {
    overflow: hidden;
    z-index: 1;
    height: 188px;
    position: relative;
    cursor: pointer;
}
.body .movie-detail .movie-filter {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #333;
}
.body .movie-detail .poster-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    position: absolute;
    -webkit-filter: blur(1.2rem);
    filter: blur(1.2rem);
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .55;
}
.body .movie-detail .detail {
    height: 100%;
    padding: 19px 30px 19px 15px;
}
.body .movie-detail .detail .poster img {
    width: 110px;
    height: 150px;
    box-sizing: border-box;
}
.box-flex {
    display: -webkit-box;
    display: flex;
}

.body .movie-detail .detail .content {
    /* overflow-y:hidden; */
    overflow-x: hidden;
    margin-left: 12.5px;
    line-height: 1;
    color: #fff;
}
.flex {
    -webkit-box-flex: 1;
    flex: 1;
}
.body .movie-detail .detail .content .title {
    font-size: 20px;
    margin-top: 2px;
    /* margin-bottom: 10px; */
    font-weight: 700;
    overflow: hidden;
}
.line-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 15px;
    /* margin-bottom: 15px; */
}
/* .poster{
  height: 150px;
} */
.title-en-name{
  color: transparent  !important;
}
.body .movie-detail .detail .content .score {
    font-size: 18px;
    font-weight: 700;
    color: #fc0;
    margin-top: 11px;
}
.body .movie-detail .detail .content .type>span {
    vertical-align: top;
}
.body .movie-detail .detail .content .type .type-group {
    display: inline-block;
    width: 42px;
    opacity: .85;
}
.body .movie-detail .arrow-g {
    position: absolute;
    width: 10px;
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.body .movie-detail .detail .content .pubDesc, .body .movie-detail .detail .content .snum, .body .movie-detail .detail .content .src, .body .movie-detail .detail .content .title-en-name, .body .movie-detail .detail .content .type {
    margin-top: 10px;
    font-size: 12px;
    color: #fff  !important;
    opacity: .8;
}
#showDays {
    width: 100%;
    height: 45px;
    overflow-x: scroll;
    background-color: #fff;
}
#showDays #timeline {
    overflow-x: scroll;
    padding: 0;
    margin: 0;
    height: 45px;
    white-space: nowrap;
}
@media (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 3){
  .mb-line-all, .mb-line-b, .mb-line-l, .mb-line-lr, .mb-line-r, .mb-line-t, .mb-line-tb, .mb-outline-b, .mb-outline-t, .mb-outline-tb {
    background-size: 1px 1px  !important;
}}

.mb-line-b {
    background: url() 0 bottom repeat-x;
}
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
#showDays #timeline .showDay.chosen {
    border-bottom: 2px solid #f03d37;
    color: #f03d37;
}
#showDays #timeline .showDay {
    position: relative;
    display: inline-block;
    width: 115.5px;
    line-height: 43px;
    margin-left: 4.5px;
    font-size: 14px;
    text-align: center;
    list-style: none;
    color: #666;
}
/* navbar */
.fixed .nav-wrap.filter-nav-wrap {
    z-index: 100;
}
.nav-wrap.filter-nav-wrap {
    width: 100%;
    height: 40px;
    z-index: 10;
    background-color: #fff;
}
.body .nav-wrap {
    position: sticky;
    top: 0;
    z-index: 1000;
}
.nav-wrap.filter-nav-wrap .tab {
    display: -webkit-box;
    display: flex;
}
@media (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 3){
    .mb-line-all, .mb-line-b, .mb-line-l, .mb-line-lr, .mb-line-r, .mb-line-t, .mb-line-tb, .mb-outline-b, .mb-outline-t, .mb-outline-tb {
    background-size: 1px 1px;
}
}
.mb-line-b {
    background: url() 0 bottom repeat-x ;
}
/* .nav-wrap::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
} */
.fixed .close-tab, .fixed .close-tab .page {
    display: block;
}
.close-tab {
    position: relative;
    width: 100%;
    background: #fff;
    z-index: 100;
    overflow: scroll;
    display: none;
}
.nav-wrap.filter-nav-wrap .tab .item {
    -webkit-box-flex: 1;
    flex: 1;
    text-align: center;
    line-height: 40px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
}
.body .tab .chosenTitle {
    color: #ff5f16;
}
div {
    display: block;
}
.nav-wrap.filter-nav-wrap .tab .item+.item:before {
    content: "";
    display: block;
    position: absolute;
    height: 20px;
    top: 10px;
    left: 0;
    border-left: 1px solid #e8e8e8;
}
.nav-wrap.filter-nav-wrap .tab .item .drop {
    display: inline-block;
    position: absolute;
    top: 18px;
    width: 0;
    height: 0;
    margin-left: 4px;
    border: 4px solid transparent;
    border-top-color: #b0b0b0;
}
.item {
    font-size: 14px;
    color: #777;
}
.item.chosenTitle .drop {
    border-bottom-color: #ff5f16  !important;
    border-top-color: transparent !important;
    top: 14px  !important;
}
/* 全城下拉部分 */
.mint-popup {
    top: 142px;
    z-index: 2998!important;
}
.mint-popup-top {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
}
.mint-popup {
    position: relative;
    background: #fff;
    top: 72px;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: .2s ease-out;
    -o-transition: .2s ease-out;
    transition: .2s ease-out;
}
.filter-wrap {
    width: 100vw;
}
.district-list {
    list-style: none;
    padding: 10px 0 0 0;
    margin: 0 0 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.district-list li {
    font-size: 12px;
    display: inline-block;
    width: calc(25vw - 12.5px);
    padding-bottom: 15px;
    padding-right: 10px;
    height: 30px;
    -ms-flex-negative: 1;
    flex-shrink: 1;
}
.district-list li div{
    position: relative;
    color: #797d82;
    border-radius: 3px;
    text-align: center;
    height: 30px;
    line-height: 27px;
}
.district-list li .selected {
    color: #ff5f16;
}
.item.chosenTitle .drop {
    border-bottom-color: #f03d37;
    border-top-color: transparent;
    top: 14px;
}
div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.district-list li .selected:after {
    content: " ";
    -webkit-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
    position: absolute;
    border: 1px solid #ff5f16;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border-radius: 4px;
}
/* cinemalist */
.cinema-list{
    background-color: #fff;
    position: relative;
}
.cinema-item {
    padding: 15px;
    position: relative;
}
.clearfix:before {
    content: "";
    display: table;
}
.cinema-detail {
    height: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.left{
    width: calc(100vw - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.right {
    color: #ff5f16;
    width: 70px;
    text-align: right;
}
.cinema-name {
    font-size: 15px;
    margin-bottom: 5px;
    color: #191a1b;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.left .address {
    font-size: 13px;
    color: #797d82;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.distance{
    color: #797d82;
    font-size: 10px;
    line-height: 26px;
}
.price-fmt, .price-fmt span {
    float: none!important;
}
.price-fmt {
    font-size: 15px;
    color: #ff5f16;
    height: 0!important;
    display: inline-table!important;
}
.qi{
    font-size: 10px;
}
.price-fmt i {
    font-size: 11px;
    font-style: normal;
}
</style>
<script>
// import http from '@/Util/http'
import Vue from 'vue'
// import Navbar from '../components/Navbar'
import http from '@/Util/http'
import ItemToplogo from '../components/ItemToplogo.vue'
import {mapMutations} from 'vuex'
import{mapState} from 'vuex'
import{mapActions} from 'vuex'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment().locale('zh-cn')
Vue.filter('Datefilter', (date) => {
  return moment(date * 1000).format('YYYY-MM-DD HH:SS')
})
Vue.filter('Distancefilter', (Distance) => {
  return ((Distance) * 10000 + '').slice(0, 4)
})
Vue.filter('premiereAtfilter',(data)=>{
    return moment(data * 1000).format('YYYY-MM-DD HH:SS')
})
Vue.filter('gradefilter', (data) => {
  if (!data) {
    return '暂无评分'
  } else {
    return data
  }
})
Vue.filter('directorfilter', (data) => {
  if (!data) {
    return '暂无主演'
  } else {
    return data
  }
})
// Vue.directive('swiper', {
//   inserted: function (el) {
//     const a = document.querySelector('#timeline').children[2]
//     const b = document.querySelector('#timeline').children[1]
//     if (a.offsetLeft === 245) {
//       // console.log(this.ishow4)
//       // a.offsetLeft = b.offsetLeft
//     }
//   }
// })
export default {
  components: { 
    ItemToplogo,
    // Navbar
  },
  computed:{
    ...mapState('Cinemalist',['cinemalist']),
    ...mapState('City',['Cityid'])
  },
  mounted () {
    if (this.cinemalist.length === 0) {
      this.getcinemalist(this.Cityid)
    } else {
      this.clearcinema()
      this.getcinemalist(this.Cityid)
    }
    // window.addEventListener('scroll', this.off_set, true)
    http({
      url: `/gateway?filmId=${this.$route.params.filmId}&k=579269`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      },
      method: 'get'
    }).then(res => {
      this.items = res.data.data.film
    })
  
    // const date = new Date()
    // console.log(date)
    // console.log(this.$moment().format('YYYY年MM月DD日 HH时mm分ss秒'))
    this.Today = moment().format('MM月DD日')
    this.Tomorrow = moment().add(1, 'days').format('MM月DD日')
    this.Aftertomorrow = moment().add(2, 'days').format('MM月DD日')
    // this.specialdaya = moment().add(3, 'days').format('YYYY-MM-DD')
    this.specialdaya = new Date(moment().add(3, 'days').format('YYYY-MM-DD')).getDay()
    this.specialdayb = new Date(moment().add(4, 'days').format('YYYY-MM-DD')).getDay()
    this.specialdayc = moment().add(3, 'days').format('MM月DD日')
    this.specialdayd = moment().add(4, 'days').format('MM月DD日')
    if (this.specialdaya === 1) {
      this.specialdaya = '周一'
    } else if (this.specialdaya === 2) {
      this.specialdaya = '周二'
    } else if (this.specialdaya === 3) {
      this.specialdaya = '周三'
    } else if (this.specialdaya === 4) {
      this.specialdaya = '周四'
    } else if (this.specialdaya === 5) {
      this.specialdaya = '周五'
    } else if (this.specialdaya === 6) {
      this.specialdaya = '周六'
    } else {
      this.specialdaya = '周日'
    }
    if (this.specialdayb === 1) {
      this.specialdayb = '周一'
    } else if (this.specialdayb === 2) {
      this.specialdayb = '周二'
    } else if (this.specialdayb === 3) {
      this.specialdayb = '周三'
    } else if (this.specialdayb === 4) {
      this.specialdayb = '周四'
    } else if (this.specialdayb === 5) {
      this.specialdayb = '周五'
    } else if (this.specialdayb === 6) {
      this.specialdayb = '周六'
    } else {
      this.specialdayb = '周日'
    }
    this.toplogohide()
    this.topbarhide()
    this.buttomhide()
    // this.$store.commit('toplogohide')
    // this.$store.commit('topbarhide')
    // this.$store.commit('buttomhide')
  },
  data () {
    return {
      items: [],
      Today: '',
      Tomorrow: '',
      Aftertomorrow: '',
      specialdaya: '',
      specialdayb: '',
      specialdayc: '',
      specialdayd: '',
      ishow1: true,
      ishow2: false,
      ishow3: false,
      ishow4: false,
      allcity: ['全城','南城县','乐安县','崇仁县','临川区','宜黄县','东乡区','南丰县','金溪县','黎川县'],
      current: 0,
      ishow: false,
      detailcinema: []
    }
  },
  methods: {
     changecolor () {
            // this.display = !display
            this.ishow = !this.ishow
        },
    changeindex (index) {
          this.current = index
    },
    ...mapActions('Cinemalist',['getcinemalist']),
    ...mapMutations('Cinemalist',['clearcinema']),
    ...mapMutations('Showhidebar',['toplogohide','topbarhide','buttomhide','toplogoshow','topbarshow','buttomshow']),
    sendid (filmId) {
      console.log(filmId)
      this.$router.push(`/Moredetail/${filmId}`)
    },
    ishowclick1 () {
      this.ishow1 = 1
      this.ishow3 = 0
      this.ishow4 = 0
      this.ishow2 = 0
    },
    ishowclick2 () {
      this.ishow2 = 1
      this.ishow1 = 0
      this.ishow3 = 0
      this.ishow4 = 0
    },
    ishowclick3 () {
      this.ishow3 = 1
      this.ishow1 = 0
      this.ishow2 = 0
      this.ishow4 = 0
    },
    ishowclick4 () {
      this.ishow4 = 1
      this.ishow1 = 0
      this.ishow2 = 0
      this.ishow3 = 0
    }
    // off_set () {
    //   console.log(console.log(document.documentElement.scrollLeft || document.body.scrollLeft))
    // }
  },
  beforeDestroy () {
    this.toplogoshow()
    this.topbarshow()
    this.buttomshow()
    // this.$store.commit('toplogoshow')
    // this.$store.commit('topbarshow')
    // this.$store.commit('buttomshow')
  }
}
</script>
